<template>
	<!-- 告警中心 -->
	<view class="p-10">
		<u-sticky>
			<view class="bg-white p-5">
				<u-tabs lineColor="#2172FC" :current="currentKey" :list="[{name: '报警统计'},{name: '报警查询'}]" lineWidth="50"
					:activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @change="selectChange"></u-tabs>
			</view>
		</u-sticky>
		<u-collapse :value="showMoreKeys" ref="collapse" v-if="currentKey == 0">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">报警趋势分析</text></view>
				</template>
				<view class="flex m-end">
					<u-tabs style="width: 200rpx;" lineColor="#2172FC" :list="[{name: '日'},{name: '月'},{name: '年'}]"
						lineWidth="20" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @click="tabclick"></u-tabs>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">未处理报警统计</text></view>
				</template>
				<view class="flex m-end">
					<u-tabs style="width: 200rpx;" lineColor="#2172FC" :list="[{name: '本月'},{name: '上月'}]"
						lineWidth="20" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @click="tabclick1"></u-tabs>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">未处理报警分布</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>
		</u-collapse>
		<view class="" v-else>
			<view class="flex m-t-10">
				<uni-data-select placeholder="报警系统" class="m-r-10" v-model="value" :localdata="typeList"
					@change="change"></uni-data-select>
				<uni-data-select placeholder="报警类型" v-model="value1" :localdata="typeList1"
					@change="change1"></uni-data-select>
			</view>
			<view class="flex m-t-10">
				<uni-data-select placeholder="报警级别" class="m-r-10" v-model="value2" :localdata="typeList2"
					@change="change2"></uni-data-select>
				<uni-data-select placeholder="报警状态" v-model="value3" :localdata="typeList3"
					@change="change3"></uni-data-select>
			</view>
			<view class="" v-if="warnningList && warnningList.length !== 0">
				<view class="p-10 m-t-10 bg-white" v-for="(item, index) in warnningList" :index="index"
					@click="handleClick(item)">
					<view class="flex m-between">
						<view class="fw"> {{item.content}}
						</view>
						<view class="">
							<up-text type="warning" :text="item.grade"></up-text>
						</view>
					</view>
					<view class="desc m-t-5">
						{{item.desc}}
					</view>
					<view class="flex m-t-5 m-between">
						<view class="">
							{{item.system}}
						</view>
						<view class="">
							{{item.type}}
						</view>
					</view>
					<view class="flex m-t-5 m-between">
						<view class=""> 报警时间:{{item.sTime}}
						</view>
						<view class=""> 处理时间:{{item.eTime}}
						</view>
					</view>
				</view>
			</view>
			<view v-else class="empty">
				<text class="empty-txt">暂无告警消息</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2, 3])

	let currentKey = ref(0),
		chartData = ref({}),
		chartData1 = ref({}),
		chartData2 = ref({}),
		typeList = ref([{
			value: 0,
			text: "系统1"
		}, {
			value: 1,
			text: "系统2"
		}, {
			value: 2,
			text: "系统3"
		}]),
		typeList1 = ref([{
			value: 0,
			text: "系统1"
		}, {
			value: 1,
			text: "系统2"
		}, {
			value: 2,
			text: "系统3"
		}]),
		typeList2 = ref([{
			value: 0,
			text: "系统1"
		}, {
			value: 1,
			text: "系统2"
		}, {
			value: 2,
			text: "系统3"
		}]),
		typeList3 = ref([{
			value: 0,
			text: "系统1"
		}, {
			value: 1,
			text: "系统2"
		}, {
			value: 2,
			text: "系统3"
		}]),
		warnningList = [{
			content: '变形5厘米',
			grade: '三级',
			system: '报警系统',
			type: '边坡监测',
			desc: '处理措施',
			sTime: '2020.5.23',
			eTime: '2021.7.5'
		}, {
			content: '变形5厘米',
			grade: '三级',
			system: '报警系统',
			type: '边坡监测',
			desc: '处理措施',
			sTime: '2020.5.23',
			eTime: '2021.7.5'
		}, {
			content: '变形5厘米',
			grade: '三级',
			system: '报警系统',
			type: '边坡监测',
			desc: '处理措施',
			sTime: '2020.5.23',
			eTime: '2021.7.5'
		}, {
			content: '变形5厘米',
			grade: '三级',
			system: '报警系统',
			type: '边坡监测',
			desc: '处理措施',
			sTime: '2020.5.23',
			eTime: '2021.7.5'
		}, {
			content: '变形5厘米',
			grade: '三级',
			system: '报警系统',
			type: '边坡监测',
			desc: '处理措施',
			sTime: '2020.5.23',
			eTime: '2021.7.5'
		}],
		opts = {
			padding: [10, 10, 0, 10],
			enableScroll: false,
			dataLabel: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				mix: 0
			},
			yAxis: {
				gridType: "dash",
				dashLength: 2,
				showTitle: true,
				data: [{
					min: 0,
					title: '次'
				}]
			},
			extra: {
				area: {
					type: "curve",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: true,
					activeType: "hollow"
				}
			}
		},
		opts1 = {
			padding: [10, 10, 0, 10],
			enableScroll: false,
			dataLabel: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				mix: 0
			},
			yAxis: {
				gridType: "solid",
				dashLength: 2,
				showTitle: true,
				gridColor: '#E0E6F1',
				data: [{
					min: 0,
					axisLine: false,
					titleFontColor: '#8993A8',
					title: '次'
				}]
			},
			extra: {
				column: {
					type: "group",
					width: 20,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
					linearType: "custom",
					seriesGap: 5,
					linearOpacity: 0.5,
					barBorderCircle: true,
					customColor: ["#2172FC", "#fff"]
				}
			}
		},
		opts2 = {
			color: ["#4C63F6", "#F6CC58", "#3CD68B", "#55BEFF", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			dataLabel: true,
			enableScroll: false,
			legend: {
				show: false
			},
			title: {
				name: "报警总数",
				fontSize: 16,
				color: "#333333"
			},
			subtitle: {
				name: "230",
				fontSize: 16,
				color: "#333333"
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 15,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF"
				}
			}
		},
		peoplelist = ref([{
			name: '梁佳伦'
		}, {
			name: '梁佳伦'
		}]),
		carlist = ref([{
			name: '新A523666'
		}, {
			name: '新A523666'
		}])
	const selectChange = (item) => {
		currentKey.value = item.index
		if (item.index == 0) {
			// 报警统计
		} else {
			// 报警查询
		}
	}
	const getServerData = () => {
		// 报警趋势分析
		setTimeout(() => {
			let res = {
				categories: ["2023-12", "2024-02", "2024-06", "2024-07", "2024-08", "2024-09"],
				series: [{
					name: "",
					data: [2, 8, 5, 7, 4, 2]
				}]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
			let res1 = {
				categories: ["一级", "二级", "三级", "四级", "五级"],
				series: [{
					name: "",
					data: [2, 8, 5, 7, 4]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res1));
			let res2 = {
				series: [{
					data: [{
						name: '边坡监测雷达',
						value: 56,
						labelText: '边坡监测雷达: 56'
					}, {
						name: '边坡监测GNSS',
						value: 12,
						labelText: '边坡监测GNSS: 56'
					}, {
						name: '煤层自燃监测',
						value: 20,
						labelText: '煤层自燃监测: 20'
					}, {
						name: '廊道消防',
						value: 56,
						labelText: '廊道消防: 56'
					}]
				}]
			};
			chartData2.value = JSON.parse(JSON.stringify(res2));
		}, 500);
	}
	const handleClick = (item) => {
		uni.navigateTo({
			url: `/pages/decision/alarm/detail`
		})
	}
	getServerData()
</script>

<style lang="scss" scoped>
	:deep(.uni-scroll-view-content uni-view) {
		flex-grow: 1;
	}

	.leader-list {
		.leader-list-item {
			margin-top: 12rpx;
			height: 125rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				flex: 1;

				.post {
					color: #555d6f;
				}

				.name {
					color: #0052D9;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				margin-right: 20rpx;

				.location {
					width: 80rpx;
					height: 80rpx;
					background: url('/static/img/arrow.png') no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
</style>